<template>
  <div class="info">
    <div class="form clearfix">
      <div class="item clearfix">
        <span class="label">用户名：</span>
        <div class="fl">
          <input type="text" class="itxt" v-model="username" />
        </div>
      </div>
      <div class="item clearfix">
        <span class="label">性别：</span>
        <div class="fl">
          <input
            type="radio"
            name="sex"
            id=""
            class="sex"
            value="男"
            v-model="gender"
            :checked="sex == '男' ? true : false"
          /><label class="mr">男</label>
          <input
            type="radio"
            name="sex"
            id=""
            class="sex"
            value="女"
            v-model="gender"
            :checked="sex == '女' ? true : false"
          /><label class="mr">女</label>
          <input
            type="radio"
            name="sex"
            id=""
            class="sex"
            value="保密"
            v-model="gender"
            :checked="sex == '保密' ? true : false"
          /><label class="mr">保密</label>
        </div>
      </div>
      <div class="item clearfix">
        <span class="label">头像：</span>
        <div class="fl head-info">
          <img :src="imgUrl" alt="image" class="head" />
          <form name="form1" id="form1">
            <input
              type="file"
              ref="inp"
              name="file"
              id="file"
              @change="fn"
              accept="image/jpg,image/jpeg,image/png,image/PNG"
            />
          </form>
          <label for="file" class=" ">选择图片</label>
        </div>
      </div>
      <div class="item clearfix">
        <span class="label">生日：</span>
        <div class="fl birthday-info">
          <input type="date" name="" id="" v-model="birth" />
        </div>
      </div>
      <div class="item clearfix">
        <span class="label">兴趣爱好：</span>
        <div class="fl interest-list">
          <p>请选择您感兴趣的分类，给您最精准的推荐</p>
          <ul class="hobul">
            <li
              name="hobbyType"
              class="i-li"
              v-for="(item, index) in arr"
              :key="index"
              @click="choose(index)"
            >
              <div class="li-item">{{ item }}<s id="ss"></s></div>
            </li>
          </ul>
        </div>
      </div>
      <div class="item clearfix">
        <span class="label">&nbsp;</span>
        <div class="fl">
          <div class="submit" @click="submit()">提交</div>
        </div>
      </div>
    </div>
    <div class="mess">
      <div class="u-pic">
        <img alt="用户头像" :src="imgUrl" />
        <div class="mask"></div>
        <div class="face-link-box"></div>
      </div>
      <div class="info-m">
        <div>
          <b>用户名：{{ username }}</b>
        </div>
        <div class="u-level">
          <span class="rank jxz"> <s></s>购物值5360 </span>
        </div>
        <div>小白信用：<a href="#" target="_blank">89.0 </a></div>
        <div>会员类型：个人用户</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [
        "图书音像/电子书刊",
        "家用电器",
        "手机/数码",
        "电脑/办公",
        "家居/家具/家装/厨具",
        "服饰内衣/珠宝首饰",
        "个护化妆",
        "鞋靴/箱包/钟表/奢侈品",
        "运动健康",
        "汽车用品",
        "母婴/玩具乐器",
        "食品饮料/保健食品",
        "彩票/旅行/充值/票务",
      ],
      username: "",
      sex: "",
      birth: "",
      imageUrl: "",
      imgUrl: "",
      gender: "",
      fd: "",
      formdata: "",
      Numb: 0,
    };
  },
  methods: {
    choose(index) {
      var lis = document.querySelectorAll(".i-li");

      var bor = document.querySelectorAll(".li-item");
      var ss = document.querySelectorAll("#ss");
      if (ss[index].style.display != "block") {
        bor[index].style.borderColor = "#e4393c";
        bor[index].style.borderWidth = "2px";
        bor[index].style.padding = "7px 8px";
        ss[index].style.display = "block";
      } else {
        bor[index].style.borderColor = "#cfcfcf";
        bor[index].style.borderWidth = "1px";
        bor[index].style.padding = " 8px 9px";
        ss[index].style.display = "none";
      }
    },
    submit() {
      this.Numb = 0;
      this.$axios.post("/user/updateUser", {
        username: this.username,
        phone: 12345,
        gender: this.gender,
        birthday: this.birth,
        id: sessionStorage.getItem("userId"),
      });
      this.$axios.post("/user/uploadHeadPortrait", {
        id: sessionStorage.getItem("userId"),
        headPortrait: this.imgUrl,
      });

      this.Numb++;
      alert("提交成功");
      location.reload();
    },

    fn(e) {
      let _this = this; //在onload中this会丢失指针 提前保存this
      let imgSrc = window.URL.createObjectURL(e.target.files[0]);
      let files = e.target.files[0];
      let img = new Image();
      img.src = imgSrc;
      if (!e || !window.FileReader) return; // 看支持不支持FileReader
      let reader = new FileReader();
      _this.imgUrl = "../../static/head/" + `${files.name}`;
      // reader.readAsDataURL(files); // 这里是最关键的一步，转换成base64
      // reader.onloadend = function () {
      //   _this.imgUrl = this.result; //返显图片
      // };
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },

  mounted() {
    // var form = document.getElementById("form1");
    // this.formdata = new FormData(form);
    this.$axios.post("/user/login", { username: "weijun", password: 123456 });
    this.$axios
      .post("/user/findByUserId", { id: sessionStorage.getItem("userId") })
      .then((res) => {
        this.username = res.data.data.username;
        this.gender = res.data.data.gender;
        this.birth = res.data.data.birthday;
        this.imgUrl = res.data.data.headPortrait;
      });
  },
  computed: {},
};
</script>
<style scoped>
.item {
  display: block;
  line-height: 30px;
  margin-bottom: 20px;
}
span.label {
  float: left;
  height: 18px;
  line-height: 18px;
  padding: 6px 0;
  width: 100px;
  text-align: right;
}
.itxt {
  height: 18px;
  width: 127px;
  line-height: 18px;
  border: 1px solid #ccc;
  padding: 5px;
}
.fl {
  float: left;
}
.sex {
  margin-right: 3px;
}
.mr {
  margin-right: 10px;
}
.form {
  width: 500px;
}
.submit {
  display: inline-block;
  border-radius: 2px;
  background-color: #f5fbef;
  height: 18px;
  line-height: 18px;
  padding: 2px 14px 3px;
  border: 1px solid #bfd6af;
}
.submit:hover {
  cursor: pointer;
}
.interest-list {
  width: 400px;
}
.interest-list li.i-li {
  height: 36px;
  padding: 0;
  border: none;
  float: left;
  line-height: 18px;
  margin: 10px 10px 0 0;
  cursor: pointer;
  white-space: nowrap;
}
.interest-list li.i-li .li-item {
  position: relative;
  height: 18px;
  line-height: 18px;
  border: 1px solid #cfcfcf;
  padding: 8px 9px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.head {
  width: 50px;
  height: 50px;
}
.mess {
  overflow: hidden;
  width: 280px;
  float: left;
  padding: 10px;
  margin-bottom: 10px;
  margin-left: 650px;
  margin-top: -500px;
  height: 102px;
  background: #f9f9f9;
  border: 1px solid #ccc;
  color: #666;
  line-height: 20px;
}
.mess .u-pic {
  position: relative;
  z-index: 0;
  float: left;
  width: 104px;
  height: 104px;
  overflow: hidden;
  text-align: center;
  margin-right: 6px;
}
.u-pic img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.u-pic .mass {
  width: 104px;
  height: 104px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.info-m {
  float: left;
  width: 170px;
}
.info-m .u-level {
  margin-bottom: 5px;
  height: 18px;
}
.i-li .li-item s {
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  background: url("../../static/img/selt.png") no-repeat;
}
</style>